SASS là gì ? Phân biệt SASS, SCSS và CSS

Hiiii mọi người, lại là Nghi đây! Nghi định hướng sẽ trở thành một Frontend Engineer nên hiện tại Nghi đang tự tìm hiểu mọi thứ về kiến thức Frontend. Và hôm nay , Nghi sẽ giới thiệu về SASS , hãy cùng Nghi tìm hỉểu xem SASS là gì nhé!

SASS là gì?

Như đề mục mình đã viết thì hẳn các bạn đã đoán ra được sự tương đồng giữa SASS và CSS rồi nhỉ

SASS (Syntactically Awesome StyleSheets) có thể được hiểu đơn giản như là:

• một CSS Preprocessor-ngôn ngữ tiền xử lí của CSS.
• một ngôn ngữ kịch bản mở rộng của CSS
• được biên dịch thành cú pháp CSS.

Vì sao SASS lại thu hút người dùng hơn nhỉ ? ? Đó là nhờ vào những tính năng mới giúp code CSS của bạn trông đẹp hơn, gọn hơn và dễ quản lí hơn , dễ thay đổi, chỉnh sửa khi cần thiết, giúp tiết kiệm thời gian và hiệu suất công việc!

 

Tiếp tục nhé, vậy SCSS với SASS khác nhau chỗ nào mà phải phân ra làm hai loại?

SASS hỗ trợ 2 loại cú pháp SASS và SCSS với những ưu điểm và nhược điểm nhất định, mình sẽ đề cập nội dung này ở dưới!

Link tham khaỏ: REFERENCES

Cài đặt trong Project:

Các bạn xem chi tiết ở Page chín h thức từ SASS: INSTALL

Điểm khác biệt nổi bật giữa SASS và SCSS?

SASS  và  SCSS  về bản chất vấn đề là giống nhau, chỉ khác nhau ở cách viết (cú pháp) thôi, như mình đã đề cập ở trên:

Một ví dụ cụ thể nhé: đây là đoạn code CSS thuần:

body {
  font: 100% Helvetica, sans-serif;
  color: #444;
}

thì với SASS format sẽ như thế này, chỉ sử dụng dấu thụt lề, sẽ giúp bạn tránh những lỗi thiếu syntax

$font-stack: Helvetica, sans-serif
$primary-color: #444

body
  font: 100% $font-stack
  color: $primary-color

Còn với SCSS format sẽ như thế này, vẫn sử dụng cặp dấu {} và ; bình thường như CSS

$font-stack: Helvetica, sans-serif;
$primary-color: #444;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Mỗi cú pháp đều có một ưu điểm riêng, việc sử dụng thụt dòng trong cú pháp như python của SASS làm code đẹp hơn, nhưng dễ xảy ra sai sót khi bạn canh không chuẩn, còn SCSS có cú pháp tương tự như CSS nên bạn dễ update kiến ​​thức và thời gian làm quen với code sẽ nhanh hơn!

 

Và trong post này mình sẽ chỉ sử dụng cách viết theo SCSS nhé!

SASS giúp tối ưu code như thế nào?

Đầu tiên ,sẽ phải kể đến tính năngVariable 

SASS hỗ trợ bạn khai báo các biến chứa các giá trị mà bạn sử dụng nhiều lần mà không bị lặp lại code

Cú pháp:

$ {tên biến}: {giá trị}

Vị dụ cụ thể như ở phần định nghĩa mình đã dùng:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Tiếp theo là Mixin:

Các bạn có thể hiểu đơn giản Mixin là một cơ chế khá phổ biến khi sử dụng SASS, nó giúp bạn sử dụng lại các thuộc tính mà bạn đã quy ước trong một mix nào đó rồi @include vào một thành phần bất kỳ mà không cần phải viết, giúp tiết kiệm thời gian và quan trọng là làm code gọn gẽ hơn. Ví dụ này nhé:

@mixin colorFont {
  color: #FFFFFF;
  font-size: 20px;
}

.navbar {
  ul.menu {
    list-style: none;
    li {
      padding: 10px;
      a {
        text-decoration: none;
        @include colorFont;
      }
    }
  }
}

Thứ ba, tính năng vô cùng hữu ích Nested Rule giúp code gọn hơn và được tổ chức tốt hơn dễ quản lí!

Làm hẳn ví dụ liền cho dễ hiểu nè, ví dụ tôi có 1 Navigation bar, có các tab riêng biệt, bình thường nếu cấu hình CSS bạn sẽ phải khai báo từng thuộc tính 

.navbar ul.menu {
  list-style: none;
  display: inline-block;
}

.navbar ul.menu li {
  padding: 10px;
}

.navbar ul.menu li a {
  font-family: Helvetica, sans-serif;
  font-size: 14px;
}

Thấy cực chưa, dễ gây nhầm lẫn và code cũng không được gọn gàng lắm Nên là áp dụng SASS liền:

.navbar {
  ul.menu {
    list-style: none;
    display: inline-block;
    li {
      padding: 10px;
      a {
        font-family: Helvetica, sans-serif;
        font-size: 14px;
      }
    }
  }
}

Thứ tư là Extend

Tính năng Extend giúp các bác sử dụng các class đã khai báo tránh trùng lặp

$whiteColor: #FFFFFF;
$blackColor: #000000;

.title {
  color: $whiteColor;
  text-shadow: 1px 1px 1px $blackColor;
  display: inline-block;
  text-transform: uppercase;
}
.navbar {
  ul.menu {
    list-style: none;
    li {
      padding: $padding_5;
      a {
        text-decoration: none;
        @extend .title;
      }
    }
  }
}

Tổng hợp lại nhé:

• dùng biến thì cứ {giá trị} : $ {tên biến}
• dùng Mixin (một nhóm thuộc tính) thì dùng @include {tên mixin}
• dùng class thì @extend {tên class}

Cảm ơn các bạn đã theo dõi!

Kiến thức về SASS không khó để research trên Internet, mong bài viết này của Nghi giúp mọi người nắm được phần nào cái nhìn tổng quan về SASS và cách sử dụng một cách khái quát!

Nghi sẽ trở lại với các bài viết thực hành ở những Blog sau, cám ơn mọi người đã theo dõi!